<template>
  <div class="main" v-loading="pageLoading">
    <div class="head">账单详情</div>
    <div class="detail">
      <span class="detail_d"><span class="lis">账单编号：</span>{{detail.sym ? detail.sym : '暂无数据'}}</span>
    </div>
    <div class="detail">
      <span class="detail_d"><span class="lis">交易时间：</span>{{detail.createTime ? detail.createTime : '暂无数据' }}</span>
      <span class="detail_d"><span class="lis">账单金额：</span>{{detail.amount ? detail.amount/100 : '暂无数据'}}</span>
      <span class="detail_d"><span class="lis">账单类型/来源：</span>{{detail.source ? detail.source : '暂无数据'}}</span>
    </div>

    <div class="detail">
      <span class="detail_d"><span class="lis">支付/提现方式：</span>{{detail.payMode ? detail.payMode : '暂无数据'}}</span>
      <span class="detail_d"><span class="lis">账单状态：</span>{{detail.status ? detail.status : '暂无数据'}}</span>
      <span class="detail_d"><span class="lis">账单类别：</span>{{detail.type ? detail.type : '暂无数据'}}</span>
    </div>
  </div>
</template>

<script>
  import * as api from '@/api/billManagement/billManagement'
  export default {
    data() {
      return {
        pageLoading:true,
        shopTurnoverId: '',
        detail: []
      }
    },
      created() {
          // 获取上页面跳转路由参数
          console.log(this.$route.query)
          this.shopTurnoverId = this.$route.query.shopTurnoverId
        },
        mounted() {
          this.billDetail()
        },
        methods: {
          billDetail() {
            this.pageLoading = true
            console.log('进入加载页面数据')
            api.billDetail(this.shopTurnoverId).then(data => {
              console.log(data)
              this.detail = data
              if (data.status == 1) {
                this.detail.status = "成功"
              } else {
                this.detail.status = "失败"
              }
            this.pageLoading = false
            })
          }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    margin: 50px 20px 0 50px;

    .head {
      font-size: 23px;
      font-weight: bolder;
    }

    .detail {
      font-size: 15px;
      display: flex;
      justify-content: space-between;
      margin: 25px 0px 25px 0;

      .detail_d {
        width: 400px;
        .lis{
          color: darkgray;
        }
      }
    }
  }
</style>
